<template>
  <div class="coupon">
    <div class="coupon-head-bg1">
        <ul class="coupon-head">
            <li>
               <router-link  :to="{ path: '/coupon/store'}" replace>
                     苏鲜生优惠券
               </router-link>
            </li>
            <li>
                <router-link  :to="{ path: '/coupon/center'}" replace>
                     易购优惠券
               </router-link>
            </li>
        </ul>
      </div>
      <router-view></router-view> 
  </div>
</template>
<script>
  import {mapState} from 'vuex';
  export default {
    data(){
      return{

      }
    }
  }
</script>

<style lang="scss" scoped>
   @function _($px) {
      $rem: $px/50;
      @return #{$rem}rem;
  }
  
  .coupon {
    background-color: #f7f7f7;
    
    .coupon-head-bg1 {
      background-color: #fff;
      overflow: hidden;
    }
    .coupon-head {
      width: _(490);
      height: _(57);
      margin: _(15) auto;
      line-height: _(57);
      text-align: center;
      border: 1px solid #ff782d;
      border-radius:_(4);
      font-size: 0;
      overflow: hidden;

        li {
          width: 50%;
          display: inline-block;
          a {
              font-size: _(28);
              color:#ff782d;
              display: block;

             &.router-link-active {
              color:#fff;
              background-color: #ff782d;
             }
          }
        }
    }
  }
    



</style>
